<template>
  <el-input
    v-model="cur_keyword"
    :placeholder="placeholder"
    :maxlength="maxlength"
    clearable
    @keydown.enter="handleSearch"
    @clear="handleSearch"
  >
    <template v-if="options" #prepend>
      <el-select v-model="activeType" class="w-[100px]">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>
    <template #append>
      <basic-icon
        name="search"
        color="#7D7E80"
        size="18px"
        class="cursor-pointer"
        @click="handleSearch"
      ></basic-icon>
    </template>
  </el-input>
</template>

<script setup lang="ts">
interface IEmit {
  (event: 'update:modelValue'): void
  (event: 'update:type', value: string | number): void
  (event: 'update:keyword', value: string | number): void
  (event: 'search'): void
}

interface IProps {
  modelValue?: object
  type?: string | number
  keyword?: string
  // 模式，field直接修改 modelValue对象中对于字段的值，key-value模式修改对应type和keyword的值
  mode?: 'field' | 'key-value'
  prop?: string
  options?: LabelValue<string | number>[]
  placeholder?: string
  maxlength?: number
}

const emit = defineEmits<IEmit>()
const props = withDefaults(defineProps<IProps>(), {
  mode: 'field',
  maxlength: 30
})

const cur_keyword = ref('')
watch(cur_keyword, () => {
  if (props.mode === 'key-value') {
    emit('update:type', activeType.value)
    emit('update:keyword', cur_keyword.value)
  } else {
    Reflect.set(props.modelValue!, activeType.value, cur_keyword.value)
  }
})

const activeType = ref<string | number>('')
// 类型发生变化，清除上一个搜索属性的值
watch(activeType, (_, oldValue) => {
  cur_keyword.value = ''
  if (props.mode === 'field' && oldValue) {
    Reflect.set(props.modelValue!, oldValue, '')
  }
})

const placeholder = computed(() => {
  if (props.placeholder) {
    return props.placeholder
  }
  if (!props.options) {
    return useI18nContent('common.global.input')
  }
  const res = props.options.find(item => item.value === activeType.value)
  return res
    ? `${useI18nContent('common.global.input')}${res.label}`
    : useI18nContent('common.global.input')
})

// 外部keyword的值
const value = computed(() => {
  if (props.mode === 'field') {
    return props.modelValue![activeType.value]
  }
  return props.keyword
})
// 外部keyword的值变化时，同步内部keyword
watch(value, () => {
  cur_keyword.value = value.value
})

// 触发搜索
function handleSearch() {
  nextTick(() => emit('search'))
}

watchEffect(() => {
  if (props.mode === 'field') {
    if (props.prop) {
      activeType.value = props.prop
    } else if (props.options) {
      activeType.value = props.options?.[0]!.value as string
    } else {
      console.warn('BasicSearchInput: prop, options属性至少配置一个')
    }
    return
  }
  if (props.type === undefined || props.type === '') {
    console.warn('BasicSearchInput: 缺少type属性')
    return
  }
  activeType.value = props.type
})
</script>

<style scoped lang="scss">
:deep(.el-input-group__append) {
  @apply w-[33px] p-0 flex-shrink-0;
}
</style>
